<template>
    <view class="margin-top-xl  x-tower-swiper"  @touchmove="TowerMove"  @touchstart="TowerStart" @touchend="TowerEnd">
       <!--  style="z-index: 3; margin-left: 40px; transform: scale(0.8);" -->
         <view class="hw-128 x-tower-item" v-for="(item, index) in swiperList" :key="index" :class="item.zIndex === 1? 'none': ''"
               :style="[{'--index': item.zIndex, '--left': item.mLeft}]"> 
             <image style="border-radius: 10px;" class="hw-128" :src="item.url"  mode="scaleToFill" /> 
        </view>
   </view>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted} from "vue"
const swiperList = reactive<any>([
    {id: 0,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'},
    {id: 1,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',}, 
    {id: 2,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'}, 
    {id: 3,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'}, 
    {id: 4,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'}, 
    {id: 5,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'}, 
    {id: 6,type: 'image',url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'}
])

const towerStart = ref(0)
const direction = ref("left")

const systemInfo = uni.getSystemInfoSync()
const screenHeight = systemInfo.screenHeight + "px"
const screenWidth = systemInfo.screenWidth + "px"
// const halfScreenWidth =  Math.floor(systemInfo.screenWidth / 2)

const initFn = () => {
    let middle = Math.floor(swiperList.length / 2) 
    for(let i = 0; i < swiperList.length; i++){
         swiperList[i].zIndex = (middle + 1) - (Math.abs(i - middle)) // ( 1, 2, 3, 4, 3, 2, 1)
         swiperList[i].mLeft =  middle - i // (3, 2, 1, 0, -1, -2, -3)
    }
     //  console.log("initFn", swiperList)
}

// towerSwiper触摸开始
const TowerStart = (event: any) => {
    towerStart.value = event.touches[0].pageX
}

// towerSwiper计算方向
const TowerMove = (event: any) => {
    direction.value = event.touches[0].pageX - towerStart.value  > 0 ? 'right' : 'left'
}

// // towerSwiper计算滚动
const TowerEnd  = (event: any) => {
   if(direction.value == "right"){
          let mLeft = swiperList[0].mLeft;
          let zIndex = swiperList[0].zIndex;
          for(let i = 1; i < swiperList.length; i++){
               swiperList[i-1].mLeft =  swiperList[i].mLeft
               swiperList[i-1].zIndex =  swiperList[i].zIndex
          }
          swiperList[swiperList.length - 1].mLeft =   mLeft
          swiperList[swiperList.length-1].zIndex =   zIndex
   }else{
          let mLeft = swiperList[swiperList.length - 1].mLeft;
          let zIndex = swiperList[swiperList.length - 1].zIndex;
          for(let i =  swiperList.length - 1; i > 0; i--){
               swiperList[i].mLeft =  swiperList[i-1].mLeft
               swiperList[i].zIndex =  swiperList[i-1].zIndex
          }
          swiperList[0].mLeft =   mLeft
          swiperList[0].zIndex =   zIndex
   }
}

onMounted(()=>{
   initFn()
})

</script>
<style scoped>
.x-tower-swiper{
    height: 288upx;
    position: relative;
    max-width: v-bind(screenWidth);
    overflow: hidden;
}

.x-tower-swiper .x-tower-item{
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     border: 1px solid white;
     border-radius: 10px;
     transition: all 0.2s ease-in 0s;

     transform: scale(calc(0.7 + var(--index) / 10));
     z-index: var(--index);
     margin-left: calc( (v-bind(screenWidth)/2) - (var(--left) * 96upx + 128upx ));
}

.none {
	opacity: 0;
}
</style>
